<template>
	<view class="content">
		<view class="set">
			<uni-easyinput class="desc m_1" :styles="cStype" type="textarea" v-model="desc" :adjust-position="false"
				placeholder="请输入您的小说主题,可指定出场角色,性别,情节,风格等">

			</uni-easyinput>

			<view class="title">
				配置信息
			</view>
			<view>
				<view @click="selectType" class="bt m_1">{{title1}}</view>
				<!-- <view @click="selectStype" class="bt m_1">{{title3}}</view> -->
				<view @click="selectTag" class="bt m_1">{{title2}}</view>
				<view class="m_1" v-if="title2 != '请选择人称'">
					<uni-easyinput class="des" :styles="cStype" v-model="name" :adjust-position="false"
						placeholder="请输入主角姓名">

					</uni-easyinput>
				</view>
			</view>

			<view class="title" style="height: auto;" v-if="story && story.length > 0">
				<text style="white-space: pre-line; margin-bottom: 30px;">{{story}}</text>
			</view>

			<view style="display: flex;flex-direction: row;justify-content: space-between;"
				v-if="story && story.length > 0">
				<button class="save" style="width: 40%;" size="mini" type="default" @click="saveInfo">重新生成大纲</button>
				<!-- <button class="save" style="width: 40%;" type="default" @click="startStory">生成故事</button> -->
			</view>
			<view style="display: flex;" v-if=" (!story || story.length == 0)">
				<button class="save" size="mini" type="default" @click="saveInfo">小说生成</button>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				desc: "",
				cStype: {
					'background-color': '#2f231f',
					'margin-top': '10px',
					"color": '#FFF',
					"borderColor": '#FFF',
					"width": "100%"
				},
				title1: "请选择类型",
				title2: "请选择人称",
				title3: "请选择风格",
				name: "",
				story: ""
			}
		},
		onLoad() {

		},

		methods: {
			selectType() {
				uni.$off("selectType")
				uni.$on("selectType", datas => {

					uni.$off("selectType");

					this.title1 = datas.join("，")

				})
				if (this.title1 != '请选择类型') {
					uni.setStorageSync("typeList", this.title1)
				}
				uni.navigateTo({
					url: '/pages2/bqg/type/index'
				})
			},
			selectTag() {
				uni.$off("selectTag")
				uni.$on("selectTag", data => {

					uni.$off("selectTag");

					this.title2 = data

				})
				uni.navigateTo({
					url: '/pages2/bqg/person/index'
				})
			},
			saveInfo() {
				if (this.title1 == "请选择类型") {
					uni.showToast({
						title:"请选择类型"
					});
					return;
				}
				if (this.title2 == "请选择人称") {
					uni.showToast({
						title:"请选择人称"
					});
					return;
				}
				if (!this.name || this.name.length == 0) {
					uni.showToast({
						title:"请输入主角姓名"
					});
					return;
				}
				
				if (!this.desc || this.desc.length == 0) {
					uni.showToast({
						title:"请简要描述故事主题"
					});
					return;
				}
				
				if(!this.$util.checkCount()) {
					return;
				}
				
				
				uni.showLoading({
					title: "故事构建..."
				})
				var title = `您是一位${this.title1}小说作家。您的任务是用生动有趣的语言写作${this.title1}故事。`;
				title += `故事的主要内容：${this.desc},故事的主角名字是${this.name},并以${this.title2}完成故事。`;
				title += `按照如下模版填写${this.title1}故事：
				标题：【在此插入故事标题】
				背景：【在此插入背景细节，包括时间段、地点和任何相关的背景信息】
				主角：【在此插入主角的姓名、年龄和职业，以及他们的个性和动机的简要描述】
				反派：【在此插入反派的姓名、年龄和职业，以及他们的个性和动机的简要描述】
				冲突：【插入故事的主要冲突，包括主角面临的问题和所涉及的利害关系】
				大纲：【在此插入故事的大纲】
				然后根据上面的要求创作故事章节`;
				// console.log(title);
				uniCloud.callFunction({
					name: 'ai',
					data: {
						content: title
					}
				}).then(res => {
					this.$util.useCount();
					this.story = res.result.reply;
					console.log(this.story);
					uni.hideLoading();

				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		background-color: $uni-main-color;
		width: 100%;
		min-height: 100%;

		.m_1 {
			margin-top: 10px;
		}

		.w_100 {
			width: 100%;
		}

		.h_100 {
			height: 100%;
		}

		.set {
			padding: 20px;



			.desc {
				margin-top: 20px;
				background-color: $uni-main-color;
			}

			.bt {
				background-color: $uni-main-color;
				border: 1px solid #FFF;
				color: #FFF;
				font-size: 15px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				border-radius: 4px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;

				padding: 5px 20px;
			}


		}

		.title {
			color: #FFF;
			font-size: 14px;
			height: 30px;
			line-height: 30px;
			white-space: pre-line;
			background-color: $uni-main-color;
		}

		.save {
			width: 100%;
			margin-top: 30px;
			background-color: #2979ff;
			color: #FFF;
			margin-left: 20px;
			margin-right: 20px;
			border-radius: 30px;
			height: 50px;
			line-height: 50px;
			font-size: 15px;
		}
	}
</style>